<template>
  <div id="picture-list">
    <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
      :data-source="dataList"
      :loading="loading"
    >
      <template #renderItem="{ item: picture }">
        <a-list-item style="padding: 0">
          <!-- 单张图片 -->
          <a-card hoverable @click="doClickPicture(picture)" style="width: 240px">
            <template #cover>
              <img
                :alt="picture.name"
                :src="picture.thumbnailUrl ?? picture.url"
                style="height: 180px; object-fit: cover"
                loading="lazy"
              />
            </template>
            <a-card-meta :title="picture.name">
              <template #description>
                <a-flex>
                  <!-- 里面的元素会自动弹性布局 -->
                  <a-tag color="green">{{ picture.category ?? '默认' }}</a-tag>
                  <a-tag v-for="(tag, index) in picture.tags" :key="index">
                    {{ tag }}
                  </a-tag>
                </a-flex>
              </template>
            </a-card-meta>
            <template v-if="showOps" #actions>
              <a-space @click="(e) => doSearch(picture, e)">
                <search-outlined />
              </a-space>
              <a-space v-if="canEdit" @click="(e) => doEdit(picture, e)">
                <edit-outlined />
              </a-space>
              <a-space v-if="canDelete" @click="(e) => doDelete(picture, e)">
                <delete-outlined />
              </a-space>
              <a-space @click="(e) => doShare(picture, e)">
                <share-alt-outlined />
              </a-space>
            </template>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
    <share-modal ref="shareModalRef" :link="shareLink" />
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { deletePictureUsingPost } from '@/request/api/pictureController.ts'
import { EditOutlined, DeleteOutlined, SearchOutlined,ShareAltOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import ShareModal from '@/components/ShareModal.vue'
import { ref } from 'vue'

const router = useRouter()

interface Props {
  dataList: API.PictureVO[]
  loading: boolean
  // 是否显示操作按钮
  showOps?: boolean
  onReload?: () => void
  canEdit?: boolean
  canDelete?: boolean
}
const shareLink = ref<string>('')

const props = withDefaults(defineProps<Props>(), {
  dataList: () => [],
  loading: () => false,
  showOps: () => false,
  canEdit: () => false,
  canDelete: () => false,
})
const doClickPicture = (picture: API.PictureVO) => {
  router.push({
    path: `/picture/${picture.id}`,
  })
}
// 编辑
const doEdit = (picture: API.PictureVO, e: Event) => {
  // 阻止时间冒泡
  e.stopPropagation()
  console.log(1)
  router.push({
    path: '/add-picture',
    query: {
      id: picture.id,
      spaceId: picture.spaceId,
    },
  })
}
// 删除
const doDelete = async (picture: API.PictureVO, e: Event) => {
  // 阻止时间冒泡
  e.stopPropagation()
  const id = picture.id
  if (!picture.id) return
  const { data: res } = await deletePictureUsingPost({ id })
  if (res.code === 0 && res.data) {
    message.success('删除成功')
    // 刷新props参数
    props.onReload?.()
  } else {
    message.error('删除失败')
  }
}
const doSearch = async (picture: API.PictureVO, e: Event) => {
  // 阻止时间冒泡
  e.stopPropagation()
 window.open(`/search-picture?pictureId=${picture.id}`)
}
const shareModalRef = ref<InstanceType<typeof ShareModal>>()
const doShare = async (picture: API.PictureVO, e: Event) => {
  // 阻止时间冒泡
  e.stopPropagation()
  shareLink.value = `${window.location.origin}/share-picture?pictureId=${picture.id}`
  shareModalRef.value?.openModal()
}
</script>
<style scoped lang="less"></style>
